Add Images and Videos

Add image, video, and other HTML elements to your project

Adding Media

You can add images and videos using two primary methods:

1. Uploading media directly to your connected GitHub repository.
2. Referencing media hosted at external URLs.

Using an external image URL

You can use images/videos hosted on platforms like Unsplash, Imgur, Youtube or similar services.

This is a quick and convenient method, but keep the following in mind:

1. Ensure you have the appropriate usage rights for any image.
2. Some servers may block external usage with a feature called CORS, which might prevent the image from loading.

Steps to Add an External Media:

1. Find an image/video on your preferred platform (e.g., Unsplash, Youtube).
2. Copy the image/video’s URL.
3. Use the URL in your project prompt. For example:

"Add a hero section image using the following URL: https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Pale_Blue_Dot.png/442px-Pale_Blue_Dot.png

Using video and images from your GitHub public directory

For projects connected to GitHub, you can upload media to your repository’s public folder and reference them in your Tempo Labs prompts.

1. Connect your repository and make sure your project is synced with GitHub.
2. Navigate to the public folder in your repository.
3. Click Add File → Upload Files.
4. Drag and drop your image/video into the public folder or use the Choose Your Files option to upload manually.
5. Write a commit message (e.g., “Add images for app use”).
6. Click Commit Changes to save the file.
7. Select the uploaded file and click on the copy icon next to the file name to copy the image’s path.
8. Reference the image in your Tempo Labs prompt, e.g., “Add a hero section image from my repository: public/my-image.jpg.”

Tips for Optimizing Images/Videos:

• Compress large images before uploading to avoid bloating your repository size.
• Scale your images to fit their intended use—e.g., don’t upload full-resolution images if they will only be used as icons.
• Consider External Hosting: For large or frequently accessed videos, use external hosting services like YouTube or Amazon S3 to minimize performance impacts.
• Use Relevant File Names: Name your files descriptively (e.g., product-intro.mp4) to keep your repository organized and make referencing easier.